<template>
  <div class="home">
      <div class="top">
          <div class="info">
            <h2>Add a platform</h2>
            
            <div class="addBtn"> 
              <span>添加平台</span>
            </div>
          </div>
          <img src="~@/assets/img/neiwangsaas/item2.png" alt="">
      </div>

      <div class="form">
          <div class="formItem">
              <div class="label">
                1.平台名称
              </div>
              <div class="input">
                  <el-input style="width:870px;" v-model="state.formObj.name" placeholder="请输入平台名称" >
                  </el-input>
              </div>
          </div>
           <div class="formItem">
              <div class="label">
                2.平台logo
              </div>
              <div class="input">
                                      <upload-file  ref="uploadFileRef"></upload-file>

              </div>
          </div>
           <div class="formItem">
              <div class="label">
                3.有效期
              </div>
              <div class="input">
                    <el-input style="width:750px;" v-model="state.formObj.date" placeholder="请输入日期" >
                  </el-input>
              </div>
          </div>
          <div class="btn">完成</div>

      </div>

  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive,inject } from 'vue'
import { useRouter } from 'vue-router'
import { createLogger, useStore } from 'vuex'
import uploadFile from '@/components/uploadFile/uploadFile'

const state = reactive({
    formObj : {
      name : '',
      date: '',
      logoImg:'',
    }
  });
export default {
  name: 'platformManList',
  components: {
    uploadFile,
  },
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      function goPage(){
        console.log('111');
        // router.push('/platformMan/addPlatformMan-add')
        console.log(router);
        router.push({
          name:'addPlatformMan'
        })
      }
     
      onMounted(()=>{
      console.log('执行了')

      });
      return{
        state,router,goPage
      }
  },
  onMounted(){
  },
  data () {
    return {
    }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  }
}
</script>
<style lang="scss" scoped>
.home{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.top {
  // width: 99.6875rem;
  width: 60%;
  height: 13rem;
  background: linear-gradient(0deg, #D0E4FE 0%, #FFFFFF 100%);
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(81, 110, 166, 0.16);
  border-radius: 20px 20px 0px 0px;
  margin: 1.125rem 0 .6875rem;
  padding: 0 4.5625rem;
  display: flex;
  justify-content: space-between;
  .info {
    h2 {
      font-size: 2.125rem;
      color: #4E72FC;
    }

   
    .addBtn {
      display: flex;
      align-items: center;
      font-size: 1.25rem;
      span{
        color: #7A8499;
      }
      .btn{
        margin-left: 2.0625rem;
        display: grid;
        place-items: center;
        width: 108px;
        height: 40px;
        background: #6C91ED;
        color: #fff;
        box-shadow: 0px 2px 6px 0px rgba(110, 132, 179, 0.2);
        border-radius: 8px;
        cursor: pointer;
      }
    }
  }

  img {
    width: 14.375rem;
    height: 9.375rem;
    // transform: translateY(-1.0625rem);
  }
}

.form{
  // width: 1054px;
  width: 60%;
  height: 50rem;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(98, 145, 238, 0.1);
  border-radius: 0px 0px 20px 20px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 30px 5%;
  .formItem{
    &:nth-child(3){
      margin-bottom: 80px;
    }
    .label{
      font-size: 1.125rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2B2D33;
      margin-bottom: 1rem;
    }
    .input{
      margin-bottom: 3.75rem;

    }
  }
 
  .btn{
      align-self: center;
      width: 88px;
      height: 34px;
      background: #6C91ED;
      box-shadow: 0px 2px 6px 0px rgba(110, 132, 179, 0.2);
      border-radius: 8px;
      color: #fff;
      font-size: 1.125rem;
      display: grid;
      place-items: center;
      margin-top: 30px;
    }
}

/deep/ .el-input__inner{
  background: #D1DDFC;
}

/deep/ .el-input__inner::placeholder{
  color: #6E93ED;
}


</style>
